<template>
	<div class="app">
		<el-carousel :height="computeHeight">
			<el-carousel-item v-for="(item, index) in sliders" :key="index">
				<img :src="item.img" class="slider_img">
			</el-carousel-item>
		</el-carousel>
		<div >
			
			<div class="solve head-label">
				<div class="box-el-xinjian">
					<el-row>
					  <el-col :span="12"><span class="text-4xl horizontal-bounce_bounce__ZbQA3 absolute -left-12">👉🏻</span></el-col>
					  <el-col :span="12"><el-button type="primary"  @click="toCreateApp" round style="width: 200px; margin-right: 20px;"  icon="el-icon-circle-plus-outline">新建</el-button></el-col>
					</el-row>
					
				</div>
			</div>
			<div class="solve head-label">
				<div class="box-el-input">
					<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" @change="inputData">
					</el-input>
				</div>
			</div>
			<!-- 盒子 -->
			<div class="border_parent" v-loading="loading">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="6" 
					v-for="(app, index) in applications"
					:key="index">
						<div class="border">
							<div class="border_img_parent">
								<div class="icon_border">
									{{app.icon}}
								</div>
							</div>
							<div class="border_title">{{app.title}}</div>
							<div class="border_content_one">{{app.desc}}</div>
							<el-row style="margin-top: 40px; width: 100%; border-top: solid rgba(0,0,0,0.15) 1px;">
								<el-col :span="12">
									<div class="flex-item-l"><i class="el-icon-position" style="margin-right: 10px;"></i>推荐
									</div>
								</el-col>
								<el-col :span="12">
									<div class="flex-item-r yx-btn" @click="toRunApp(app.title,app.desc,app.instruct,app.examples)">
										<i class="el-icon-video-play" style="margin-right: 10px;"></i>
										运行
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
					
			
				</el-row>
			</div>
		</div>



	</div>
</template>
<script>
	import axios from "axios";
	import Vue from 'vue';
	import {baseUrl} from '../utils/global.js'
	export default {
		name: 'Index',
		data() {
			return {
				tuIcon: '🤖',
				input: '',
				sliders: [],
				carousel_height: '550px',
				applications: [],
				loading: true,
			}
		},
		methods: {
			/* 输入框 */
			inputData(e) {
				this.input = e
				this.findAppList()
			},
			/* 去添加应用页面 */
			toCreateApp(){
				this.$router.push({name: "CreateApplication"});
			},
			/* 去运行页面 */
			toRunApp(title,desc,instruct,examples){
				if(title == ""){
					this.$message.error("标题不能为空");
					return
				}
				if(desc == ""){
					this.$message.error("描述不能为空");
					return
				}
				if(instruct == ""){
					this.$message.error("指令不能为空");
					return
				}
				if(examples == ""){
					this.$message.error("示例不能为空");
					return
				}
				this.$router.push({
					path:"/RunApp",//这个path就是你在router/index.js里边配置的路径
					query:{
						  title: title,
						  desc: desc,
						  instruct: instruct,
						  examples: examples
					}
				})
			},
			/* 查询列表数据 */
			findAppList(){
				const config = {
					headers: {
						"Authorization": "bearer " + Vue.$cookies.get('token'),
					}
				};
				axios.get(baseUrl + "/chat_application/application/search?value=" + this.input, config)
				.then((res) => {
					if(res.status == 200){
						this.applications = res.data
						this.loading= false
					}
				})
				.catch((res) => {
				  this.$message.error("请求失败");
				});
			}
		},
		mounted() {
			this.sliders = [{
					img: "http://zhan.youruoiot.cn/banner1.png"
				},
				
			];
			this.findAppList()
		},
		computed: {
			//计算高度
			computeHeight() {
				let screenHeight = document.body.clientWidth;
				if (screenHeight > 415) {
					return '550px';
				} else {
					return '250px';
				}
			},
			computeArrowImg() {
				let screenHeight = document.body.clientWidth;
				if (screenHeight > 450) {
					return require('../../static/other/arrow.png');
				} else {
					return require('../../static/other/arrow_down.png');
				}
			}

		},
	}
</script>

<style scoped>
	@import '../../static/css/index.css'
</style>
